import { ref,onMounted, onBeforeUnmount} from  'vue'
// 作业：1 获取鼠标的位置,x,y
// 扩展：获取的位置显示在鼠标的右上方

export function useMouse(show=true){
  // 定义一个要显示div
  var div;
  // 要返回的数据
  const p = ref({x:0,y:0});
  // 当鼠标移动
  function  onMove(e){
    // 更新数据
    p.value.x = e.clientX;
    p.value.y = e.clientX;
    // 更新div的内容
    div.innerText = e.clientX+","+e.clientY;
    // 更新div的微信
    div.style.left = e.clientX+10+"px";
    div.style.top = e.clientY+"px";
  }
  // 挂载时候
  onMounted(()=>{
    // 创建div
    div = document.createElement("div");
    // 设置div样式
    div.style.position = "absolute";
    div.style.fontSize = '10px';
    // 监听鼠标移动
    window.addEventListener("mousemove",onMove)
    // 如果传入参数为true则显示div
    if(show){ document.body.appendChild(div);}
   
  });
  // 卸载时候
  onBeforeUnmount(() => {
    // 移除事件监听
    window.removeEventListener("mousemove",onMove)
    // 如果显示为true
    if(show){
      // 移除div节点
      document.body.removeChild(div);
    }
   
  })
  return p;
}

// 获取元素的垂直滚动距离
export function useScroll(){
  // 滚动的对象
  const elem = ref();
  // 滚动的垂直距离
  const num = ref(0);
  function onScroll(){
    // 更新num的值（滚动的值）
    num.value = elem.value.scrollTop;
  }
  onMounted(()=>{
    elem.value.addEventListener("scroll",onScroll);
  })
  onBeforeUnmount(() => {
    elem.value.removeEventListener("scroll",onScroll);
  })
  // 返回的是一个数组
  return [elem,num]
}

// 什么时候还可以点击，onMounted
// 02 期望点击元素 翻转其内部的文本
export function useReverse(){
  // 定义一个被点击的元素
  const elem = ref();
  function onReverse(){
    // 翻转文本
    elem.value.innerText =  elem.value.innerText.split('').reverse().join('');
  }
  // 挂载注册dom点击事件
  onMounted(()=>{
    elem.value.addEventListener("click",onReverse);
  })
  // 卸载前移除
  onBeforeUnmount(()=>{
    elem.value.removeEventListener("click",onReverse);

  })
  // 返回
  return elem;
}

// 什么时候可以监听，什么时候移除
// 监听事件，移除监听事件
// 当窗口发送变化时候更新size
// 定义好了组合api 获取窗口宽高
export function useWinSize(){
  var size = ref({w:window.innerWidth,h:window.innerHeight});
 
  function onReize(){
    size.value.w = window.innerWidth;
    size.value.h = window.innerHeight;
  }
  // 挂载监听
  onMounted(()=>{
    window.addEventListener("resize",onReize)
    // window add添加Event事件Listener监听器 resize（窗口发送变化） 执行onResize方法
    // 注册窗口的变化执行onResize方法
  })
  // 卸载移除
  onBeforeUnmount(()=>{
    window.removeEventListener("resize",onReize)
    // 移除事件监听
  })

  return size
}